iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
Modern Web

前後端整合,用Spring boot 與React 開發屬於自己的記帳網頁系列 第 11

Day11 開發根據不同類別篩選帳目API

  • 分享至 

  • xImage
  •  

前言

關於記帳,除了紀錄、修改、刪除跟查找資料之外,我們還會想要依照類別去看自己花了哪些,可能是關於食物的花費,或是交通、娛樂的花費我們花費了多少,有了這些資訊,我們才能從自己紀錄的帳目中找出關鍵的消費,並且嘗試減少開銷。
所以接下來的幾個功能是針對我們的記帳功能而特別開發的,是使用到前幾天我們學會的CRUD技巧,並且再做一點進階的變化。
那麼,就來開始今天的教學吧!

開發類別篩選

前面說過,所有的開發順序都是以Repository-> Service->Controller三個方向開發,而之前的新增、刪除、修改、查找都是已經寫好的功能,所以我們只要extends JpaRepository就可以直接使用,但是篩選類別這件事情,是要根據類別(Category)進行查找,原本的Jpa並不會有這個功能,所以我們要新增這個功能。
新增的方法很簡單,只要到那個Repository中,新增一個findByCategory這個功能即可。
整個程式碼如下:

package net.Eric.accounting.repository;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;

import net.Eric.accounting.entity.Account;

public interface AccountRepository extends JpaRepository<Account, Long>{
	
	List<Account> findByCategory(String category);
}

這樣我們就完成了Repository,接下來我們要去新增Service層的資料,就如同之前所說,Service分成interface類別的Serivce,以及實作類別的Impl,所以我們在這個階段要開發兩個程式碼
第一個Interface類別如下

Service開發

package net.Eric.accounting.service;

import java.util.List;

import net.Eric.accounting.dto.AccountDto;

public interface AccountsService {

	AccountDto createAccount(AccountDto accountDto);
	AccountDto getAccount(Long id);
	List<AccountDto> getAllAccounts();
	AccountDto updateAccount(AccountDto accountDto,Long id);
	void deleteAccount(Long id);
	List<AccountDto> getAllAccountsByCategory(String category);
}

接下來的Impl程式碼如下,實作的方法很簡單,就只要呼叫Repository即可,這邊Return看起來比較複雜,是因為我們要將accout這個資料轉換成前端用的accountDto之外,還要轉換成List,所以整個方法就變成將List的Account變成一筆筆的資料,然後用Map進行轉換,轉換完成之後因為都變成一筆筆的資料,我們還要用Collect進行轉換,重新轉換成List

ServiceImpl開發

	@Override
	public List<AccountDto> getAllAccountsByCategory(String category) {
		List<Account> accounts = accountRepository.findByCategory(category);
		return accounts.stream().map((account)->modelMapper.map(account,AccountDto.class)).collect(Collectors.toList());
	}

在完成前面兩個操作之後,就要進行Controller的操作,這邊輸入以下程式碼,這裡的意思是說API會接收category的參數,然後將這個參數當作catrgory去查詢,查詢完成後將這個資料回傳給使用者。

Controller開發

	@GetMapping("category/{category}")
	public ResponseEntity<List<AccountDto>> getAllAccountsByCategory(@PathVariable("category") String category){
		List<AccountDto> accountDtos = accountsService.getAllAccountsByCategory(category);
		return new ResponseEntity<>(accountDtos,HttpStatus.OK);
	}

完成這些之後,當然就是要進行測驗,來測試自己的結果是否正確。
在測試前,先注意自己的類別都填寫什麼。我在這個專案中將類別設置成可以任意輸入,在後端與前端都是如此,當然大家可以在後端設置任意輸入,由前端進行限制等等方法處理,而這邊為了簡化程式,就單純讓人任意輸入。
所以大家要注意自己資料庫的類別到底是什麼,是不是都是同樣的名稱。
https://ithelp.ithome.com.tw/upload/images/20240922/20152864HnKqdK5FHU.png
這邊紀錄的都是食物與交通,在測試的時候也要用食物或交通進行測試
https://ithelp.ithome.com.tw/upload/images/20240922/20152864wQppO1T89B.png
請在Postman的資料夾中新增Get All Accounts by Category,然後輸入右邊的http://localhost:8080/aacounts/category/食物,或者有人可能寫food,就是根據自己資料庫的東西進行查詢。
當我們Post成功的話,就代表已經完成了這個篩選類別的API了!
有許多人可能會在啟動Spring boot、或是進行Post的時候出現問題,這就代表自己的設計上有邏輯的問題,請大家花時間耐心的處理這些問題,因為在學習開發專案的過程中,這些問題才是學習的養分,只有一個一個的把問題給解決,我們才能變成更好的工程師。
那麼,各位伙伴們,我們就明天見囉!


上一篇
Day10 開發後端Spring boot修改與刪除記帳清單的API
下一篇
Day12 創建後端讀取指定周數時間帳目的特殊API
系列文
前後端整合,用Spring boot 與React 開發屬於自己的記帳網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言